<template >
	<div class="contain-report">
		<div class="report-title">实验室管理</div>
		<div class="report-search">
			<el-input
					size="small"
					style="width: 200px"
					placeholder="请输入实验室名称"
					clearable
					@clear="getList"
					v-model="form.laboratoryName"
			>
				<i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="searchList"></i>
			</el-input>
		</div>
		<div class="report-btns">
			<el-button type="primary" v-if="userInfo.roleFlag === 1" size="small" @click="addDialog = true">新建实验室</el-button>
		</div>
		<div class="report-table">
			<el-table
					:data="tableData"
					style="width: 100%">
				<el-table-column label="实验室名称" align="center" prop="laboratoryName">
				</el-table-column>
				<el-table-column label="实验室LOGO"  align="center">
					<template slot-scope="scope">
						<img :src ="scope.row.imgUrl" style="width: 50px;height: 50px" >
					</template>
				</el-table-column>
				<el-table-column label="实验室管理员"  align="center" prop="userName">
				</el-table-column>
				<el-table-column label="实验员数量"  align="center" prop="num">
				</el-table-column>
				<el-table-column label="操作"  align="center">
					<template slot-scope="scope">
						<el-button type="text" v-if="userInfo.roleFlag === 1" @click="openEditDialog(scope.row)">编 辑</el-button>
						<el-button type="text" @click="openDown(scope.row.id)">查看实验员</el-button>
						<el-button type="text" @click="deleteById(scope.row.id)">删 除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="report-page">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="1"
					:page-sizes="[5]"
					:page-size="5"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
		
		
		<el-drawer
				title="我是标题"
				:visible.sync="drawer"
				@close="getList"
				:with-header="false">
			<div class="drawer-box">
				<div class="main-box">
					<div class="main-input">
						<el-input  placeholder="请输入手机号"
								   clearable
								   @clear="getGridList"
								   v-model="gridForm.phone" size="small">
							<i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="searchGridList"></i>
						</el-input>
					</div>
					<div class="main-btn">
						<el-button size="small" @click="downloadFile" style="margin-right: 20px">模板下载</el-button>
						<el-upload
								class="upload-demo"
								:action= uploadUrl
								:headers = myHeaders
								ref="upload"
								:on-success="leadingIn"
								:limit="1"
								:data="uploadData"
								:show-file-list="false"
						>
							<el-button size="small">批量导入</el-button>
						</el-upload>
					</div>
					<div class="main-table">
						<el-table
								:data="gridData"
								style="width: 100%"
								border
						>
							<el-table-column
									prop="studentNumber"
									label="学号"
									align="center">
							</el-table-column>
							<el-table-column
									prop="phone"
									label="手机号"
									align="center">
							</el-table-column>
							<el-table-column
									prop="userName"
									label="姓名"
									align="center">
							</el-table-column>
							<el-table-column
									label="操作"
									align="center">
								<template slot-scope="scope">
									<el-button type="text" @click="getUserOut(scope.row.id)">移除实验室</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<div class="main-page">
						<el-pagination
								background
								layout="prev, pager, next"
								@current-change="handleGridChange"
								:page-size="5"
								:total="gridTotal">
						</el-pagination>
					</div>
				</div>
			</div>
		</el-drawer>
		
		<el-dialog
				:show-close="false"
				:visible.sync="addDialog"
				width="40%"
		>
			<div class="dialog-box">
				<div class="box-top">新建实验室</div>
				<div class="box-body">
					<el-form label-width="80px">
						<el-form-item label="名称:">
							<el-input placeholder="请输入实验室名称" v-model="addForm.laboratoryName"></el-input>
						</el-form-item>
						<el-form-item label="管理员:">
							<el-select placeholder="请选择实验室管理员"  v-model="addForm.userId" style="width: 100%">
								<el-option
										v-for="item in teacherList"
										:key="item.id"
										:label="item.userName"
										:value="item.id"
								>
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="LOGO:">
							<el-upload
									class="avatar-uploader"
									:action= uploadImg
									:headers = myHeaders
									:show-file-list="false"
									:on-success="handleAvatarSuccess"
									:before-upload="beforeAvatarUpload"
							>
								<img v-if="addForm.imgUrl" :src="addForm.imgUrl" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
					</el-form>
					<div class="form-btn">
						<el-button type="primary" size="small" @click="submitAdd" style="margin-right: 20px">提 交</el-button>
						<el-button size="small" @click="addDialog = false">取 消</el-button>
					</div>
				</div>
			</div>
		</el-dialog>
		
		
		<el-dialog
				:show-close="false"
				:visible.sync="editDialog"
				width="40%"
		>
			<div class="dialog-box">
				<div class="box-top">编辑实验室</div>
				<div class="box-body">
					<el-form label-width="80px">
						<el-form-item label="名称:">
							<el-input placeholder="请输入实验室名称" v-model="editForm.laboratoryName"></el-input>
						</el-form-item>
						<el-form-item label="管理员:">
							<el-select placeholder="请选择实验室管理员"  v-model="editForm.userId" style="width: 100%">
								<el-option
										v-for="item in teacherList"
										:key="item.id"
										:label="item.userName"
										:value="item.id"
								>
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="LOGO:">
							<el-upload
									class="avatar-uploader"
									:action= uploadImg
									:headers = myHeaders
									:show-file-list="false"
									:on-success="handleEditSuccess"
									:before-upload="beforeAvatarUpload"
							>
								<img v-if="editForm.imgUrl" :src="editForm.imgUrl" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
					</el-form>
					<div class="form-btn">
						<el-button type="primary" size="small" @click="submitEdit" style="margin-right: 20px">提 交</el-button>
						<el-button size="small" @click="editDialog = false">取 消</el-button>
					</div>
				</div>
			</div>
		</el-dialog>
	
	</div>
</template >

<script >
    import {deleteLaboratory, laboratoryPage , downLaboratory,getOut,addRoom,getAllTeacher,editRoom} from "../../api/laboratory";
    import common from "../../utils/common";
    import request from "../../utils/request";
    export default {
        name: "laboratory",
        data(){
            return{
                userInfo:null,
                uploadUrl: common.requestUrl + '/upload/upload',
                uploadImg:common.requestUrl + '/upload/uploadWordFile',
                myHeaders: {
                    satoken: ''
                },
                form:{
                    laboratoryName: "",
                    pageIndex: 1,
                    pageSize: 5
                },
                tableData:[],
                total:null,
                drawer:false,
                gridForm:{
                    laboratoryId: null,
                    pageIndex: 1,
                    pageSize: 5,
                    phone: ""
                },
                gridTotal:null,
                gridData:[],
                uploadData:{
                    id:null,
                    type:2
                },
                addDialog:false,
                addForm:{
                    imgUrl: "",
                    laboratoryName: "",
                    userId: null
                },
                teacherList:[],
                editDialog:false,
                editForm:{}
            }
        },
        created () {
            this.myHeaders.satoken = sessionStorage.getItem('token')
            this.userInfo =JSON.parse( sessionStorage.getItem('user'))
        },
        mounted() {
            this.getList()
            this.getAllTeacher()
        },
        methods:{
            openEditDialog(item){
                const { imgUrl, userId,id ,laboratoryName} = item
                this.editForm = { imgUrl, userId,laboratoryId:id ,laboratoryName}
                console.log(this.editForm)
                this.editDialog = true
            },
            async getAllTeacher(){
                const { data } = await  getAllTeacher()
                if (data.code === 200){
                    this.teacherList = data.data.data
                    console.log(this.teacherList,'PPPP')
                }
            },
            handleEditSuccess(res){
                if (res.code === 200){
                    this.$message.success(res.message)
                    this.editForm.imgUrl = res.data.fileUrl
                }
            },
            handleAvatarSuccess(res){
                if (res.code === 200){
                    this.$message.success(res.message)
                    this.addForm.imgUrl = res.data.fileUrl
                }
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            downloadFile(){
                request({
                    url: common.requestUrl + "/upload/downloadTemplate",
                    method: 'get',
                    responseType: 'blob',
                }).then(resp => {
                    console.log('ppp',resp)
                    const blob = new Blob([resp.data], {type: "application/vnd.ms-excel"});
                    const url = window.URL.createObjectURL(blob);
                    let a = document.createElement('a');
                    a.download = '实验室模板.xls';
                    a.href = url;
                    a.click();
                })  //导出文件请求
            },
            leadingIn(res){
                console.log(res)
                if (res.code !== 200){
                    this.$message.error(res.message)
                }else {
                    this.$message.success(res.message)
                    this.drawer = false
                    this.getList()
                }
                this.$refs.upload.clearFiles() //上传成功之后清除历史记录
            },
            async getList(){
                const { data } = await laboratoryPage(this.form)
                console.log(data)
                if (data.code === 200){
                    this.tableData = data.data.data
                    this.total = data.data.total
                }
            },
            searchList(){
                if (!this.form.laboratoryName){
                    this.$message.warning('请输入实验室名称名称')
                }else {
                    this.getList()
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.form.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.form.pageIndex = val
                this.getList()
            },
            getUserOut(id){
                this.$confirm('此操作将永久移出该实验室, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    getOut(id).then(res => {
                        console.log(res)
                        if (res.data.code === 200){
                            this.$message.success(res.data.message)
                            this.getGridList()
                        }
                    })
                })
            },
            deleteById(id){
                this.$confirm('此操作将永久删除该实验室, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteLaboratory(id).then(res => {
                        console.log(res)
                        if (res.data.code === 200){
                            this.$message.success(res.data.message)
                            this.getList()
                        }
                    })
                })
            },
            async openDown(id){
                this.gridForm.phone = ''
                this.gridForm.pageIndex = 1
                this.gridForm.pageSize = 5
                this.gridForm.laboratoryId = id
                await this.getGridList()
                this.drawer = true
                this.uploadData.id = id
            },
            async handleGridChange(val){
                this.gridForm.pageIndex = val
                await this.getGridList()
            },
            async getGridList(){
                const { data } = await downLaboratory(this.gridForm)
                if (data.code === 200){
                    this.gridData = data.data.data
                    this.gridTotal = data.data.total
                }
            },
            searchGridList(){
                if (!this.gridForm.phone){
                    this.$message.error('请输入手机号码')
                }else {
                    this.getGridList()
                }
            },
            async submitAdd(){
                for (let key in this.addForm){
                    if (!this.addForm[key]){
                        this.$message.error('请将新增参数填写完整')
                    }
                }
                const { data } = await addRoom(this.addForm)
                if (data.code === 200){
                    this.$message.success(data.message)
                    this.addDialog = false
                    this.addForm.imgUrl = ''
                    this.addForm.userId = ''
                    this.addForm.laboratoryName = ''
                    await this.getList()
                }
            },
            async submitEdit(){
                for (let key in this.editForm){
                    if (!this.editForm[key]){
                        this.$message.error('请将编辑参数填写完整')
                    }
                }
                const { data } = await editRoom(this.editForm)
                if (data.code === 200){
                    this.$message.success(data.message)
                    this.editDialog = false
                    this.editForm = {}
                    await this.getList()
                }
            }
        },
    }
</script >

<style scoped lang="less">
	.contain-report {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		.drawer-box{
			width: 100%;
			height: 100%;
			padding: 20px;
			box-sizing: border-box;
			.main-box{
				width: 100%;
				height: 100%;
				padding: 10px;
				box-sizing: border-box;
				.main-input{
					width: 50%;
				}
				.main-btn{
					margin-top: 20px;
					display: flex;
					box-sizing: border-box;
				}
				.main-table{
					margin-top: 20px;
					box-sizing: border-box;
					width: 100%;
				}
				.main-page{
					margin-top: 20px;
					box-sizing: border-box;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		.dialog-box{
			width: 100%;
			min-height: 50vh;
			border-radius: 5px;
			overflow: hidden;
			.box-top{
				width: 100%;
				height: 10vh;
				background-image: linear-gradient(to left, #948af1 0%, #c193db 50%, #ed9bc6 100%);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26px;
				color: #fff;
			}
			.box-body{
				width: 100%;
				height: 80%;
				padding:5% 10%;
				box-sizing: border-box;
				background-color: #ffffff;
				/deep/.el-input__inner{
					border: none;
					background-color: #ecedef;
				}
				/deep/.el-textarea__inner{
					border: none;
					background-color: #ecedef;
				}
				/deep/.avatar-uploader .el-upload {
					border: 1px dashed #d9d9d9;
					border-radius: 6px;
					cursor: pointer;
					position: relative;
					overflow: hidden;
				}
				/deep/.avatar-uploader .el-upload:hover {
					border-color: #409EFF;
				}
				/deep/.avatar-uploader-icon {
					font-size: 28px;
					color: #8c939d;
					width: 100px;
					height: 100px;
					line-height: 100px;
					text-align: center;
				}
				/deep/.avatar {
					width: 100px;
					height: 100px;
					display: block;
				}
				.form-btn{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.file-list{
					margin-top: 20px;
					width: 100%;
					.file-box{
						margin-top: 10px;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							width: 40%;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}
				}
			}
		}
		.report-title{
			font-size: 22px;
			color: #666;
		}
		.report-search{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			p{
				margin: 0 10px;
				box-sizing: border-box;
				&:hover{
					cursor: pointer;
				}
			}
		}
		.report-btns{
			width: 100%;
			display: flex;
			align-items: center;
		}
		.report-table{
			width: 100%;
			margin: 20px 0;
			box-sizing: border-box;
		}
		.report-page{
			position: absolute;
			bottom: 10px;
			left: 50%;
			width: 100%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
